<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Ioannis Smyrnios - Frontmen">
    <title>Amsterdam: avoid the bikes & return home!</title>
    <style>
        body {
            background-color: rgb(48, 48, 48);
            color: rgb(238, 238, 238);
        }
        #panel {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            font-size: xx-large;
            flex: 600px
        }
        #panel> table td {
            height: 56px;
            width: 56px;
            text-align: center;
            vertical-align: middle;
        }
        table {
            border-collapse:collapse;
        }
        #container {
            display: flex
        }
        #desc {
            flex: 200px;
            text-align: center;
            padding: 30px;
            padding-top: 150px;
            font-size: large;
        }
        #stats {
            flex: 200px;
            padding: 30px;
            padding-top: 150px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="desc">
            You just got your new job in Amsterdam and moved in. After you picked up your new laptop from the Frontmen offices you need to 
            return to your new home. Little did you know about these crazy bikes...
        </div>
        <div id="game">
            <div id="panel">
                <table><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
            </div>
        </div>
        <div id="stats">

            <h2>Goal: survive! & reach your home!</h2>
            <h2>Controls: Arrows</h2>
            <h2>Difficulty: <span id="difficulty">0</span></h2>
            <h2>Timer: <span id="timer">0</span></h2>
            <p>difficulty 4 = home :)</p>
            <p>difficulty increases every 1 min</p>
            <br/>
        </div>
    </div>
    <script>
        const game = [...new Array(10)].map(elem => new Array(10));
        let difficulty = 1;
        let timer = 180;

        // game set-up
        for (i = 0; i < 10; i++) {
            for (j = 0; j < 10; j++) {
                if(i === 0 || i === 9){
                    game[i][j] = {
                        occupied: false,
                        background: 'green'
                    }
                } else if(i === 1 || i === 8){
                    game[i][j] = {
                        occupied: false,
                        background: 'red'
                    }
                } else {
                    game[i][j] = {
                        occupied: false,
                        background: 'gray'
                    }
                }
            }
        }
        game[5][0].content = "🧍";
        game[5][0].player = true;

        
        game[5][9].content = "🚴‍♂️";
        game[5][9].occupied = true;

        // paint
        paintAll();

        function paintAll() {
            let rows = document.querySelector('tbody').querySelectorAll('tr');
            for (i = 0; i < 10; i++) {
                for (j = 0; j < 10; j++) {
                    rows[i].cells[j].style.backgroundColor = game[i][j].background;
                    rows[i].cells[j].innerHTML = game[i][j].content ? game[i][j].content :"";
                    // check for defeat
                    if(game[i][j].player && game[i][j].occupied){
                        rows[i].cells[j].innerHTML = "💥";
                        setTimeout(() => { 
                            clearInterval(timerId);
                            alert("Collision! Hope you have life insurance!"); 
                        });
                    }
                    // check for victory
                    if(game[i][j].player && game[i][j].home){
                        setTimeout(() => { 
                            clearInterval(timerId);
                            alert("Home sweet home!");
                        });
                    }
                }
            }

        }


        // move player
        function movePlayer(key){
            switch (key) {
                case "ArrowLeft":
                    for (i = 0; i < 10; i++) {
                        for (j = 0; j < 10; j++) {
                            if(game[i][j].player){
                                if(j !== 0){
                                    game[i][j].content = "";
                                    game[i][j].player = false;
                                    game[i][j-1].content = "🧍";
                                    game[i][j-1].player = true;
                                    paintAll();
                                    return;
                                }
                            }
                        }
                    }
                break;
                case "ArrowRight":
                    for (i = 0; i < 10; i++) {
                        for (j = 0; j < 10; j++) {
                            if(game[i][j].player){
                                if(j !== 9){
                                    game[i][j].content = "";
                                    game[i][j].player = false;
                                    game[i][j+1].content = "🧍";
                                    game[i][j+1].player = true;
                                    paintAll();
                                    return;
                                }
                            }
                        }
                    }
                break;
                case "ArrowUp":
                    for (i = 0; i < 10; i++) {
                        for (j = 0; j < 10; j++) {
                            if(game[i][j].player){
                                if(i !== 0){
                                    game[i][j].content = "";
                                    game[i][j].player = false;
                                    game[i-1][j].content = "🧍";
                                    game[i-1][j].player = true;
                                    paintAll();
                                    return;
                                }
                            }
                        }
                    }
                break;
                case "ArrowDown":
                    for (i = 0; i < 10; i++) {
                        for (j = 0; j < 10; j++) {
                            if(game[i][j].player){
                                if(i !== 9){
                                    game[i][j].content = "";
                                    game[i][j].player = false;
                                    game[i+1][j].content = "🧍";
                                    game[i+1][j].player = true;
                                    paintAll();
                                    return;
                                }
                            }
                        }
                    }
                break;
            }
        }
        document.addEventListener("keydown", function(event) {
            event.preventDefault();
            const key = event.key;
            movePlayer(key);
        });

        function generateLastColumn(){
            for (i = 0; i < 10; i++) {

                if(difficulty < 4 ){
                    if(i === 0 || i === 9){
                        const treeGen = Math.floor(Math.random() * 50); 
                        const treeGenCheck = treeGen < difficulty * 5;

                        game[i][9] = {
                            occupied: treeGenCheck,
                            background: 'green',
                            content: treeGenCheck ? "🌲" : ""
                        }
                    } else if(i === 1 || i === 8){

                        const bikeGen = Math.floor(Math.random() * 50); 
                        const bikeGenCheck = bikeGen < difficulty * 5;
                        const bike = bikeGen % 2 === 1 ? "🚴‍♂️" : "🚴‍♀️";

                        game[i][9] = {
                            occupied: bikeGenCheck,
                            background: 'red',
                            content: bikeGenCheck ? bike : ""
                        }
                    } else {
                        const bikeGen = Math.floor(Math.random() * 90); 
                        const bikeGenCheck = bikeGen < difficulty * 6;
                        let bike = bikeGen % 2 === 1 ? "🚴‍♂️" : "🚴‍♀️";
                        if(5 < bikeGen && bikeGen < 10){
                            bike = "🚗"
                        }
                        if(bikeGen === 10){
                            bike = "🚒"
                        }
                        if(bikeGen === 11){
                            bike = "🏍️"
                        }
                        if(bikeGen === 12){
                            bike = "🚌"
                        }
                        if(bikeGen === 13){
                            bike = "🚐"
                        }
                        if(bikeGen === 14){
                            bike = "🛸"
                        }

                        game[i][9] = {
                            occupied: bikeGenCheck,
                            background: 'gray',
                            content: bikeGenCheck ? bike : ""
                        }
                    }
                } else {
                    game[i][9] = {
                        occupied: false,
                        background: 'gray',
                        content: "🏡",
                        home: true
                    }

                }

                
            }
        }

        function updateTimer(){

            timer = timer - 0.5;
            if(Number.isInteger(timer) ){
                document.querySelector('#timer').innerHTML = timer;
            }
        }


        // move stage
        // repeat with the interval of 1 second
        let timerId;
        setTimeout(()  =>
            {
            timerId = setInterval(() => {
                let playerSet = false;
                for (i = 0; i < 10; i++) {
                    for (j = 0; j < 9; j++) {
                        if(game[i][j].player && !playerSet){
                            game[i][j].content = "";
                            game[i][j].player = false;
                            game[i][j+1].content = "🧍";
                            game[i][j+1].player = true;
                            playerSet = true;
                        }
                        game[i][j] = game[i][j+1];
                    }
                }
                generateLastColumn();

                paintAll();
                updateTimer();
            }, 500);

            
            document.querySelector('#difficulty').innerHTML = difficulty;
            let timerDiffId = setInterval(() => {
                if(difficulty<4){
                    difficulty++;
                    document.querySelector('#difficulty').innerHTML = difficulty;
                }
            }, 60000);
        }, 1000);

        // after 5000 seconds stop
        setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000000);
    </script>

</body>
</html>